<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>供给列表 | SocialSupply</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary-color: #3b82f6;
            --primary-light: rgba(59, 130, 246, 0.1);
            --secondary-color: #64748b;
            --light-bg: #f8fafc;
            --border-color: #e2e8f0;
            --card-shadow: 0 2px 8px rgba(0,0,0,0.08);
            --hover-shadow: 0 4px 12px rgba(0,0,0,0.12);
            --transition-speed: 0.3s;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f1f5f9;
            color: #1e293b;
            line-height: 1.5;
        }
        
        .container {
            max-width: 1320px;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            padding: 0.75rem 0;
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: var(--primary-color);
            text-decoration: none;
        }
        
        .nav-icon {
            font-size: 1.25rem;
            color: var(--secondary-color);
            transition: color var(--transition-speed);
        }
        
        .nav-icon:hover {
            color: var(--primary-color);
        }
        
        /* 筛选区域样式 */
        .filters-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--card-shadow);
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }
        
        .filter-section {
            margin-bottom: 1.25rem;
            padding-bottom: 1.25rem;
            border-bottom: 1px solid var(--border-color);
        }
        
        .filter-section:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: #1e293b;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .filter-title i {
            color: var(--primary-color);
        }
        
        /* 搜索框样式 */
        .search-container {
            position: relative;
            max-width: 600px;
            width: 100%;
        }
        
        .search-input {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 2.5rem;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 0.95rem;
            transition: all var(--transition-speed);
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--primary-light);
        }
        
        .search-icon {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--secondary-color);
        }
        
        /* 标签筛选样式 */
        .filter-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        
        .tag-filter {
            background-color: var(--light-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 0.35rem 1rem;
            font-size: 0.85rem;
            color: var(--secondary-color);
            cursor: pointer;
            transition: all var(--transition-speed);
        }
        
        .tag-filter:hover {
            background-color: var(--primary-light);
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
        
        .tag-filter.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        /* 价格范围滑块 */
        .price-range {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-top: 0.75rem;
        }
        
        .price-slider {
            flex: 1;
        }
        
        .price-display {
            min-width: 120px;
            text-align: center;
            font-weight: 500;
            color: var(--primary-color);
        }
        
        /* 排序和视图切换 */
        .sort-view-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .sort-select {
            padding: 0.5rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background-color: white;
            font-size: 0.9rem;
        }
        
        .view-options {
            display: flex;
            gap: 0.5rem;
        }
        
        .view-btn {
            background-color: white;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--secondary-color);
            transition: all var(--transition-speed);
        }
        
        .view-btn:hover, .view-btn.active {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }
        
        /* 供给列表样式 */
        .supply-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        .supply-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: transform var(--transition-speed), box-shadow var(--transition-speed);
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .supply-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--hover-shadow);
        }
        
        .card-image {
            width: 100%;
            aspect-ratio: 4/3;
            object-fit: cover;
        }
        
        .card-body {
            padding: 1rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .card-author {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
            font-size: 0.85rem;
        }
        
        .author-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 500;
            color: #1e293b;
        }
        
        .post-time {
            color: var(--secondary-color);
            margin-left: auto;
        }
        
        .card-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            flex: 1;
            transition: color var(--transition-speed);
        }
        
        .supply-card:hover .card-title {
            color: var(--primary-color);
        }
        
        .card-category {
            display: inline-block;
            background-color: var(--primary-light);
            color: var(--primary-color);
            font-size: 0.75rem;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            margin-bottom: 0.75rem;
        }
        
        .card-price {
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 0.75rem;
        }
        
        .card-stats {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 0.8rem;
            color: var(--secondary-color);
            margin-top: auto;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        /* 列表视图样式 */
        .list-view .supply-list {
            grid-template-columns: 1fr;
        }
        
        .list-view .supply-card {
            flex-direction: row;
            height: auto;
        }
        
        .list-view .card-image {
            width: 200px;
            aspect-ratio: 4/3;
        }
        
        .list-view .card-actions {
            display: flex;
            gap: 1rem;
            margin-left: auto;
        }
        
        .list-view .action-btn {
            background: none;
            border: none;
            color: var(--secondary-color);
            display: flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 0.85rem;
            transition: color var(--transition-speed);
        }
        
        .list-view .action-btn:hover {
            color: var(--primary-color);
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .list-view .card-image {
                width: 160px;
            }
        }
        
        @media (max-width: 768px) {
            .filter-section {
                margin-bottom: 1rem;
                padding-bottom: 1rem;
            }
            
            .sort-view-controls {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .list-view .supply-card {
                flex-direction: column;
            }
            
            .list-view .card-image {
                width: 100%;
            }
            
            .list-view .card-actions {
                margin-left: 0;
                margin-top: 1rem;
            }
        }
        
        /* 筛选器折叠按钮 */
        .filter-toggle {
            display: none;
            background-color: white;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 0.75rem 1rem;
            width: 100%;
            text-align: left;
            font-weight: 500;
            margin-bottom: 1rem;
            justify-content: space-between;
            align-items: center;
        }
        
        @media (max-width: 768px) {
            .filter-toggle {
                display: flex;
            }
            
            .filters-container {
                display: none;
            }
            
            .filters-container.active {
                display: block;
            }
        }
        
        /* 结果统计 */
        .results-count {
            color: var(--secondary-color);
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }
        
        /* 加载更多按钮 */
        .load-more {
            display: block;
            margin: 2rem auto;
            background-color: white;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
            padding: 0.75rem 2rem;
            border-radius: 6px;
            font-weight: 500;
            transition: all var(--transition-speed);
        }
        
        .load-more:hover {
            background-color: var(--primary-color);
            color: white;
        }
        
        /* 通知提示 */
        .toast-container {
            z-index: 1050;
            top: calc(45% - 50px);
            left: calc(50% - 150px);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a href="#" class="logo">SocialSupply</a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse justify-content-center" id="navbarContent">
                <div class="d-flex w-100 max-w-xl">
                    <div class="search-container w-100">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="search-input" placeholder="搜索供给、用户或标签...">
                    </div>
                </div>
            </div>
            
            <div class="d-flex gap-3 ms-3">
                <a href="#" class="nav-link nav-icon">
                    <i class="fas fa-home"></i>
                </a>
                <a href="#" class="nav-link nav-icon">
                    <i class="fas fa-bell"></i>
                </a>
                <a href="#" class="nav-link nav-icon">
                    <i class="fas fa-user-circle"></i>
                </a>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container py-5">
        <h1 class="mb-4">供给列表</h1>
        
        <!-- 移动端筛选器折叠按钮 -->
        <button class="filter-toggle" id="filterToggle">
            <span><i class="fas fa-filter me-2"></i>筛选条件</span>
            <i class="fas fa-chevron-down"></i>
        </button>
        
        <!-- 筛选区域 -->
        <div class="filters-container" id="filtersContainer">
            <!-- 搜索筛选 -->
            <div class="filter-section">
                <h3 class="filter-title">
                    <i class="fas fa-search"></i> 搜索筛选
                </h3>
                <div class="search-container">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="搜索供给名称、描述或标签...">
                </div>
            </div>
            
            <!-- 类别筛选 -->
            <div class="filter-section">
                <h3 class="filter-title">
                    <i class="fas fa-tags"></i> 供给类别
                </h3>
                <div class="filter-tags">
                    <div class="tag-filter active">全部类别</div>
                    <div class="tag-filter">数字产品</div>
                    <div class="tag-filter">实体商品</div>
                    <div class="tag-filter">服务</div>
                    <div class="tag-filter">创意作品</div>
                    <div class="tag-filter">二手物品</div>
                    <div class="tag-filter">技能交换</div>
                    <div class="tag-filter">知识分享</div>
                </div>
            </div>
            
            <!-- 价格范围筛选 -->
            <div class="filter-section">
                <h3 class="filter-title">
                    <i class="fas fa-money-bill-wave"></i> 价格范围
                </h3>
                <div class="price-range">
                    <input type="range" min="0" max="1000" value="500" class="form-range price-slider" id="priceMin">
                    <span class="price-display" id="priceRangeText">¥0 - ¥500</span>
                    <input type="range" min="0" max="1000" value="500" class="form-range price-slider" id="priceMax">
                </div>
            </div>
            
            <!-- 状态筛选 -->
            <div class="filter-section">
                <h3 class="filter-title">
                    <i class="fas fa-toggle-on"></i> 供给状态
                </h3>
                <div class="filter-tags">
                    <div class="tag-filter active">全部状态</div>
                    <div class="tag-filter">可立即获取</div>
                    <div class="tag-filter">预售中</div>
                    <div class="tag-filter">限量供应</div>
                    <div class="tag-filter">定制服务</div>
                </div>
            </div>
            
            <!-- 评分筛选 -->
            <div class="filter-section">
                <h3 class="filter-title">
                    <i class="fas fa-star"></i> 最低评分
                </h3>
                <div class="filter-tags">
                    <div class="tag-filter active">不限</div>
                    <div class="tag-filter">4星及以上</div>
                    <div class="tag-filter">3星及以上</div>
                    <div class="tag-filter">2星及以上</div>
                </div>
            </div>
            
            <!-- 时间筛选 -->
            <div class="filter-section">
                <h3 class="filter-title">
                    <i class="fas fa-clock"></i> 发布时间
                </h3>
                <div class="filter-tags">
                    <div class="tag-filter active">不限</div>
                    <div class="tag-filter">今天</div>
                    <div class="tag-filter">本周</div>
                    <div class="tag-filter">本月</div>
                    <div class="tag-filter">半年内</div>
                </div>
            </div>
            
            <!-- 应用筛选按钮 -->
            <div class="d-flex gap-2">
                <button class="btn btn-primary flex-1" id="applyFilters">
                    <i class="fas fa-check me-2"></i>应用筛选
                </button>
                <button class="btn btn-outline-secondary flex-1" id="resetFilters">
                    <i class="fas fa-sync-alt me-2"></i>重置
                </button>
            </div>
        </div>
        
        <!-- 排序和视图控制 -->
        <div class="sort-view-controls">
            <div>
                <span class="results-count" id="resultsCount">找到 24 个符合条件的供给</span>
            </div>
            <div class="d-flex gap-3">
                <div>
                    <select class="sort-select" id="sortSelect">
                        <option value="relevance">按相关度</option>
                        <option value="newest">最新发布</option>
                        <option value="price-low">价格从低到高</option>
                        <option value="price-high">价格从高到低</option>
                        <option value="popular">最受欢迎</option>
                    </select>
                </div>
                <div class="view-options">
                    <button class="view-btn active" id="gridViewBtn" title="网格视图">
                        <i class="fas fa-th"></i>
                    </button>
                    <button class="view-btn" id="listViewBtn" title="列表视图">
                        <i class="fas fa-list"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 供给列表 -->
        <div class="supply-list" id="supplyList">
            <!-- 供给卡片1 -->
            <div class="supply-card">
                <img src="https://picsum.photos/600/400?random=1" alt="手工皮革笔记本" class="card-image">
                <div class="card-body">
                    <div class="card-author">
                        <img src="https://picsum.photos/100/100?random=101" alt="张小匠的头像" class="author-avatar">
                        <span class="author-name">张小匠</span>
                        <span class="post-time">2小时前</span>
                    </div>
                    <span class="card-category">实体商品</span>
                    <h3 class="card-title">手工皮革笔记本 - 个性化定制</h3>
                    <div class="card-price">¥198.00</div>
                    <div class="card-stats">
                        <div class="stat-item">
                            <i class="fas fa-eye"></i>
                            <span>2.5k</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-comment"></i>
                            <span>128</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-bookmark"></i>
                            <span>356</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-star"></i>
                            <span>4.8</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 供给卡片2 -->
            <div class="supply-card">
                <img src="https://picsum.photos/600/400?random=2" alt="城市风光摄影作品集" class="card-image">
                <div class="card-body">
                    <div class="card-author">
                        <img src="https://picsum.photos/100/100?random=102" alt="李摄影师的头像" class="author-avatar">
                        <span class="author-name">李摄影师</span>
                        <span class="post-time">昨天</span>
                    </div>
                    <span class="card-category">数字产品</span>
                    <h3 class="card-title">城市风光摄影作品集 - 可商用授权</h3>
                    <div class="card-price">¥399.00</div>
                    <div class="card-stats">
                        <div class="stat-item">
                            <i class="fas fa-eye"></i>
                            <span>1.8k</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-comment"></i>
                            <span>94</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-bookmark"></i>
                            <span>278</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-star"></i>
                            <span>4.7</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 供给卡片3 -->
            <div class="supply-card">
                <img src="https://picsum.photos/600/400?random=3" alt="手绘插画服务" class="card-image">
                <div class="card-body">
                    <div class="card-author">
                        <img src="https://picsum.photos/100/100?random=103" alt="王插画的头像" class="author-avatar">
                        <span class="author-name">王插画</span>
                        <span class="post-time">3天前</span>
                    </div>
                    <span class="card-category">服务</span>
                    <h3 class="card-title">个性化手绘插画 - 头像/封面设计</h3>
                    <div class="card-price">¥150.00 起</div>
                    <div class="card-stats">
                        <div class="stat-item">
                            <i class="fas fa-eye"></i>
                            <span>867</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-comment"></i>
                            <span>42</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-bookmark"></i>
                            <span>156</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-star"></i>
                            <span>4.9</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 供给卡片4 -->
            <div class="supply-card">
                <img src="https://picsum.photos/600/400?random=4" alt="手工编织饰品套装" class="card-image">
                <div class="card-body">
                    <div class="card-author">
                        <img src="https://picsum.photos/100/100?random=104" alt="刘手工的头像" class="author-avatar">
                        <span class="author-name">刘手工</span>
                        <span class="post-time">1周前</span>
                    </div>
                    <span class="card-category">实体商品</span>
                    <h3 class="card-title">手工编织饰品套装 - 耳环+项链</h3>
                    <div class="card-price">¥89.00</div>
                    <div class="card-stats">
                        <div class="stat-item">
                            <i class="fas fa-eye"></i>
                            <span>1.2k</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-comment"></i>
                            <span>78</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-bookmark"></i>
                            <span>215</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-star"></i>
                            <span>4.6</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 供给卡片5 -->
            <div class="supply-card">
                <img src="https://picsum.photos/600/400?random=5" alt="专业英语翻译服务" class="card-image">
                <div class="card-body">
                    <div class="card-author">
                        <img src="https://picsum.photos/100/100?random=105" alt="陈翻译的头像" class="author-avatar">
                        <span class="author-name">陈翻译</span>
                        <span class="post-time">2天前</span>
                    </div>
                    <span class="card-category">服务</span>
                    <h3 class="card-title">专业英语翻译服务 - 文档/网站本地化</h3>
                    <div class="card-price">¥200.00/千字</div>
                    <div class="card-stats">
                        <div class="stat-item">
                            <i class="fas fa-eye"></i>
                            <span>642</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-comment"></i>
                            <span>31</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-bookmark"></i>
                            <span>98</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-star"></i>
                            <span>4.5</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 供给卡片6 -->
            <div class="supply-card">
                <img src="https://picsum.photos/600/400?random=6" alt="二手相机" class="card-image">
                <div class="card-body">
                    <div class="card-author">
                        <img src="https://picsum.photos/100/100?random=106" alt="赵器材的头像" class="author-avatar">
                        <span class="author-name">赵器材</span>
                        <span class="post-time">4天前</span>
                    </div>
                    <span class="card-category">二手物品</span>
                    <h3 class="card-title">二手相机出售 - 95新 微单套机</h3>
                    <div class="card-price">¥3200.00</div>
                    <div class="card-stats">
                        <div class="stat-item">
                            <i class="fas fa-eye"></i>
                            <span>1.5k</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-comment"></i>
                            <span>103</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-bookmark"></i>
                            <span>289</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-star"></i>
                            <span>4.7</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <button class="load-more" id="loadMoreBtn">
            加载更多
        </button>
    </div>

    
    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 筛选器折叠功能（移动端）
            const filterToggle = document.getElementById('filterToggle');
            const filtersContainer = document.getElementById('filtersContainer');
            
            filterToggle.addEventListener('click', function() {
                filtersContainer.classList.toggle('active');
                const icon = this.querySelector('.fa-chevron-down');
                icon.classList.toggle('rotate-180');
            });
            
            // 价格范围滑块
            const priceMin = document.getElementById('priceMin');
            const priceMax = document.getElementById('priceMax');
            const priceRangeText = document.getElementById('priceRangeText');
            
            function updatePriceRange() {
                const min = Math.min(priceMin.value, priceMax.value);
                const max = Math.max(priceMin.value, priceMax.value);
                priceRangeText.textContent = `¥${min} - ¥${max}`;
            }
            
            priceMin.addEventListener('input', updatePriceRange);
            priceMax.addEventListener('input', updatePriceRange);
            
            // 标签筛选切换
            const tagFilters = document.querySelectorAll('.tag-filter');
            tagFilters.forEach(tag => {
                tag.addEventListener('click', function() {
                    // 找到同一组中的所有标签
                    const parentGroup = this.parentElement;
                    const siblings = parentGroup.querySelectorAll('.tag-filter');
                    
                    // 移除同组中其他标签的active类
                    siblings.forEach(sib => sib.classList.remove('active'));
                    
                    // 给当前点击的标签添加active类
                    this.classList.add('active');
                });
            });
            
            // 视图切换（网格/列表）
            const gridViewBtn = document.getElementById('gridViewBtn');
            const listViewBtn = document.getElementById('listViewBtn');
            const body = document.body;
            
            gridViewBtn.addEventListener('click', function() {
                body.classList.remove('list-view');
                gridViewBtn.classList.add('active');
                listViewBtn.classList.remove('active');
            });
            
            listViewBtn.addEventListener('click', function() {
                body.classList.add('list-view');
                listViewBtn.classList.add('active');
                gridViewBtn.classList.remove('active');
            });
            

            // 应用筛选按钮
            const applyFiltersBtn = document.getElementById('applyFilters');
            applyFiltersBtn.addEventListener('click', function() {
                // 在实际应用中，这里会收集所有筛选条件并发送请求
                showNotification('筛选条件已应用');
                
                // 在移动端自动收起筛选面板
                if (window.innerWidth <= 768) {
                    filtersContainer.classList.remove('active');
                    filterToggle.querySelector('.fa-chevron-down').classList.remove('rotate-180');
                }
            });
            
            // 重置筛选按钮
            const resetFiltersBtn = document.getElementById('resetFilters');
            resetFiltersBtn.addEventListener('click', function() {
                // 重置所有标签筛选
                tagFilters.forEach(tag => {
                    // 只激活每组中的第一个标签（通常是"全部"或"不限"）
                    if (Array.from(tag.parentElement.children).indexOf(tag) === 0) {
                        tag.classList.add('active');
                    } else {
                        tag.classList.remove('active');
                    }
                });
                
                // 重置价格滑块
                priceMin.value = 0;
                priceMax.value = 500;
                updatePriceRange();
                
                // 重置排序选择
                document.getElementById('sortSelect').value = 'relevance';
                
                showNotification('筛选条件已重置');
            });
            
            // 排序选择变化
            const sortSelect = document.getElementById('sortSelect');
            sortSelect.addEventListener('change', function() {
                const sortType = this.options[this.selectedIndex].text;
                showNotification(`已按${sortType}排序`);
            });
            
            // 加载更多功能
            const loadMoreBtn = document.getElementById('loadMoreBtn');
            loadMoreBtn.addEventListener('click', function() {
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
                this.disabled = true;
                
                // 模拟加载延迟
                setTimeout(() => {
                    this.innerHTML = '加载更多';
                    this.disabled = false;
                    showNotification('已加载更多供给');
                    
                    // 实际应用中这里会加载并添加新内容
                }, 1500);
            });
        });
    </script>
</body>
</html>

